<template>
<div class='container'>
    <!--账变记录 筛选-->
    <div class="accountScreen" >
      <!--下拉菜单标题-->
      <van-nav-bar title="账变记录" left-arrow @click-left="$router.back()"> </van-nav-bar>
      <!--下拉菜单内容-->
      <van-dropdown-menu >
        <!--订单菜单-->
        <van-dropdown-item :title="acountTypeTitle">
          <div class="row">
            <van-row type="flex" justify="center" gutter="10" class="row-z">
              <van-col span="5.5">
                <van-button class="btn " :class="{active:acountTypeTitle=='全部类型'}" @click="acountType='all';acountTypeTitle='全部类型'">全部类型</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" :class="{active:acountTypeTitle=='账户充值'}" @click="acountType='Recharge';acountTypeTitle='账户充值'">账户充值</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" :class="{active:acountTypeTitle=='余额提现'}" @click="acountType='Withdrawal';acountTypeTitle='余额提现'">余额提现</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" :class="{active:acountTypeTitle=='购买货单'}" @click="acountType='buy';acountTypeTitle='购买货单'">购买货单</van-button>
              </van-col>
            </van-row>
            <van-row type="flex" justify="center" gutter="10" class="row-z">
              <van-col span="5.5">
                <van-button class="btn" :class="{active:acountTypeTitle=='盈利金额'}" @click="acountType='profit';acountTypeTitle='盈利金额'">盈利金额</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" :class="{active:acountTypeTitle=='官方返利'}" @click="acountType='Rebate';acountTypeTitle='官方返利'">官方返利</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" :class="{active:acountTypeTitle=='生日礼包'}" @click="acountType='birthday';acountTypeTitle='生日礼包'">生日礼包</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" :class="{active:acountTypeTitle=='其他类型'}" @click="acountType='auther';acountTypeTitle='其他类型'">其它类型</van-button>
              </van-col>
            </van-row>
          </div>
        </van-dropdown-item>
        <van-dropdown-item :title="stateTitle">
          <div class="row">
            <van-row type="flex" justify="center" gutter="10" class="row-z">
              <van-col span="5.5">
                <van-button class="btn" :class="{active:stateTitle=='全部状态'}" @click="acountType='all';stateTitle='全部状态'">全部状态</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" :class="{active:stateTitle=='操作成功'}" @click="acountType='succsess';stateTitle='操作成功'">操作成功</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" :class="{active:stateTitle=='等待处理'}" @click="acountType='waiting';stateTitle='等待处理'">等待处理</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" :class="{active:stateTitle=='操作失败'}" @click="acountType='failed';stateTitle='操作失败'">操作失败</van-button>
              </van-col>
            </van-row>
          </div>
        </van-dropdown-item>
        <van-dropdown-item :title="daysTitle">
          <div class="row">
            <van-row type="flex" justify="center" gutter="10">
              <van-col span="5.5">
                <van-button class="btn" :class="{active:daysTitle=='所有日期'}" @click="acountType='all';daysTitle='所有日期'">所有日期</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" :class="{active:daysTitle=='近三天'}" @click="acountType='3days';daysTitle='近三天'">近三天</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" :class="{active:daysTitle=='近七天'}" @click="acountType='7days';daysTitle='近七天'">近七天</van-button>
              </van-col>
              <van-col span="5.5">
                <van-button class="btn" :class="{active:daysTitle=='近一月'}" @click="acountType='onemonth';daysTitle='近一月'">近一月</van-button>
              </van-col>
            </van-row>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <!--content-->
    <div class="content" >
      <van-cell  size="large" is-link @click="toAccountInfo(item)" v-for="item in acountLists" :key="item.id">
        <template #title>
          <div class="text-image">
            <img :src="item.logo" alt="" class="img-align">
            <div class="right-text">
              <span class="custom-title-type">{{item.type}}</span>
              <span class="custom-title">{{item.date}}</span>
            </div>
          </div>
        </template>
        <template #default>
          <div class="rightText">
            <span>{{item.price}}</span>
            <span class="statetext" :class="{stateFailed:item.success==='失败',stateWaiting:item.success==='等待'}">{{item.state}}</span>
          </div>
        </template>
      </van-cell>
    </div>
    <!--记录详情-->
    <van-popup
      v-model="showPopup"
      position="bottom"
      round
      :lock-scroll="false"
      :style="{ height: '65%' }"
    >
        <!--标题-->
        <van-nav-bar title="账变详情" left-arrow>
        <template #left>
            <van-icon name="cross" />
        </template>
        </van-nav-bar>
        <!--账变内容-->
        <div class="account-content">
            <span>{{acountItem.price}}</span>
        </div>
        <van-cell   >
          <template #title>
              <span>账变类型</span>
          </template>
          <template #default>
              <span>{{acountItem.type}}</span>
          </template>
        </van-cell>
        <van-cell  >
          <template #title>
              <span>充值状态</span>
          </template>
          <template #default>
              <span>{{acountItem.state}}</span>
          </template>
        </van-cell>
        <van-cell   >
          <template #title>
              <span>账户余额</span>
          </template>
          <template #default>
              <span>2000.00</span>
          </template>
        </van-cell>
        <van-cell   >
          <template #title>
              <span>账变时间</span>
          </template>
          <template #default>
              <span>{{acountItem.date}}</span>
          </template>
        </van-cell>
        <van-cell   >
          <template #title>
              <span>账变编号</span>
          </template>
          <template #default>
              <span>{{acountItem.orderNumber}}</span>
              <img src="~@/assets/orderSvg/复制.svg" alt="" class="img" @click="copyOrderNumber"/>
              
          </template>
        </van-cell>
    </van-popup>
</div>
</template>

<script>
import acountList from '@/api/constant/acount';
export default {
name:'AccountChangeRecord',
data(){
    return {
        showPopup:false,
        acountList:acountList.acountList,
        acountTypeTitle:'全部类型',
        stateTitle:'全部状态',
        daysTitle:'所有日期',
        acountItem:{},
        acountType:''
    }
},
methods:{
    toAccountInfo(item){
        this.showPopup=true
        this.acountItem=item
    },
    copyOrderNumber(){
    var cInput = document.createElement("input");
    cInput.value = this.acountItem.orderNumber;
    document.body.appendChild(cInput);
    cInput.select(); // 选取文本框内容
    document.execCommand('copy')
    this.$toast.success('复制成功')
    document.body.removeChild(cInput);
    },
},
computed:{
  acountLists(){
        if(this.acountType==='Recharge'){
          return this.acountList.filter(item=>item.type==='账户充值')
        }else if(this.acountType==='Withdrawal'){
          return this.acountList.filter(item=>item.type==='余额提现')
        }else if(this.acountType==='profit'){
          return this.acountList.filter(item=>item.type==='盈利金额')
        }else if(this.acountType==='buy'){
          return this.acountList.filter(item=>item.type==='购买货单')
        }else if(this.acountType==='Rebate'){
          return this.acountList.filter(item=>item.type==='官方返利')
        }else if(this.acountType==='birthday'){
          return this.acountList.filter(item=>item.type==='生日礼包')
        }else if(this.acountType==='auther'){
          return this.acountList
        }else if(this.acountType==='succsess'){
          return this.acountList.filter(item=>item.success==='成功')
        }else if(this.acountType==='waiting'){
          return this.acountList.filter(item=>item.success==='等待')
        }else if(this.acountType==='failed'){
          return this.acountList.filter(item=>item.success==='失败')
        }else if(this.acountType==='3days'){
          return this.acountList.filter(item=>{
           return  new Date().getDate() - new Date(item.date).getDate() <=3 && new Date().getFullYear() == new Date(item.date).getFullYear() && new Date().getMonth() == new Date(item.date).getMonth()
          })
        }else if(this.acountType==='7days'){
          return this.acountList.filter(item=>{
           return  new Date().getDate() - new Date(item.date).getDate() <=7 && new Date().getFullYear() == new Date(item.date).getFullYear() && new Date().getMonth() == new Date(item.date).getMonth()
          })
        }else if(this.acountType==='oneMonth'){
          return this.acountList.filter(item=>{
           return   new Date().getFullYear() == new Date(item.date).getFullYear() && new Date().getMonth() - new Date(item.date).getMonth() == 1
          })
        }else{
          return this.acountList
        }
  }
}
}
</script>
<style scoped lang="less">
.container{
  height: 1334px;
  background-color: #efefef;
 .accountScreen{
    width: 100%;
    height: 188px;
    position: fixed;
    top:0;
    left: 0;
    z-index: 2;
    .btn {
    width: 160px;
    height: 70px;
    border-radius: 12px;
    background-image: linear-gradient(180deg,#FFFFFF,#FDFDFD,#FCFAFA);
    font-size: 13px;
    }
    .active{
      background-image: linear-gradient(182deg,#FA7D22,#FA461B);
      color: #fff;
    }
    .row {
      padding: 40px 20px;
    }
    .row-z {
      margin-bottom: 20px;
    }
  }
  .content{
    margin-top: 224px;
    .text-image{
       display: flex;
       align-items: center;
       .img-align{
          margin-right: 20px;
          vertical-align: middle;
       }
       .right-text{
          display: flex;
          flex-direction: column;
          .custom-title-type{
            font-size: 32px;
            color: #2E3B5E;
          }
          .custom-title{
            font-size: 28px;
            color: #657295;
          }
       }
    }
    .rightText{
      display: flex;
      flex-direction: column;
      color: #323233;
      span{
        font-size: 32px;
      }
      .statetext{
        font-size: 28px;
        color: #657295;
      }
      .stateFailed{
      color: #F56C7D;
      }
      .stateWaiting{
      color: #608BFD;
      }
    }
    .van-cell__title{
      flex:3;
    }
    .van-cell {
        display: flex;
        align-items: center;
    }
  }
  .account-content{
    padding: 80px;
    display: flex;
    justify-content: center;
    align-content: center;
    margin-top: 20px;
    span{
      font-size: 72px;
    }
    
  }
  .van-cell__value{
    flex:2;
  }
  .img{
    // margin-left: 20px ;
    vertical-align: middle;
  }
  input {
    width: 320px;
    border: 0;
  }
}

</style>